<template>
  <div ref="refLibWelcome" id="lib-welcome" :style="`height: ${mainHeight}px`">
    <div class="statistic-box">
      <el-statistic title="索引统计" :value="indexTotalCount">
        <template #prefix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
      <el-statistic title="标签统计" :value="tagTotalCount">
        <template #prefix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
      <el-statistic title="文件统计" :value="fileTotalCount">
        <template #prefix>
          <el-icon style="vertical-align: -0.125em">
            <ChatLineRound />
          </el-icon>
        </template>
      </el-statistic>
      <el-button type="primary" size="large" @click="handleRefresh" link>
        刷新
        <el-icon :size="20">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
            <path
              d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
      </el-button>
    </div>
    <div class="statistic-record-box">
      <div class="statistic-link-box">
        <h4 class="statistic-link-title">经常访问</h4>
        <template v-for="(item, index) in alwaysVisits" :key="index">
          <el-link :class="[item.style, 'statistic-link']" @click="$emit('open:meta', item.id)">{{ item.title
          }}</el-link>
        </template>
        <span class="statistic-link-empty" v-show="alwaysVisits.length === 0">暂无记录</span>
      </div>
      <div class="statistic-link-box">
        <h4 class="statistic-link-title">较少访问</h4>
        <template v-for="(item, index) in hardlyVisits" :key="index">
          <el-link :class="[item.style, 'statistic-link']" @click="$emit('open:meta', item.id)">{{ item.title
          }}</el-link>
        </template>
        <span class="statistic-link-empty" v-show="hardlyVisits.length === 0">暂无记录</span>
      </div>
      <div class="statistic-link-box">
        <h4 class="statistic-link-title">最新录入</h4>
        <template v-for="(item, index) in latestRecords" :key="index">
          <el-link :class="[item.style, 'statistic-link']" @click="$emit('open:meta', item.id)">{{ item.title
          }}</el-link>
        </template>
        <span class="statistic-link-empty" v-show="latestRecords.length === 0">暂无记录</span>
      </div>
      <div class="statistic-link-box">
        <h4 class="statistic-link-title">最早录入</h4>
        <template v-for="(item, index) in earliestRecords" :key="index">
          <el-link :class="[item.style, 'statistic-link']" @click="$emit('open:meta', item.id)">{{ item.title
          }}</el-link>
        </template>
        <span class="statistic-link-empty" v-show="earliestRecords.length === 0">暂无记录</span>
      </div>
    </div>
  </div>
</template>

<script>
class Link {
  style
  title
  id
  constructor(id, title, style) {
    this.id = id
    this.title = title
    this.style = style
  }
}
function max(a, b, field) {
  return b[field] - a[field]
}
function min(a, b, field) {
  return a[field] - b[field]
}
function styleCompute(index) {
  switch (index) {
    case 0:
      return 'statistic-link-1st'
    case 1:
      return 'statistic-link-2nd'
    case 2:
      return 'statistic-link-3rd'
    case 3:
      return 'statistic-link-4th'
    default:
      return 'statistic-link-5th'
  }
}
export default {
  created() {
    this.load()
  },
  beforeMount() {
    this.$nextTick(() => {
      const refSearchHeader = this.$refs.refLibWelcome.parentElement.parentElement.parentElement.children[0]
      const refSearchTab = this.$refs.refLibWelcome.parentElement.children[0]
      this.mainHeight = document.body.offsetHeight
        - refSearchHeader.offsetHeight
        - refSearchTab.offsetHeight
        - 24
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight
          - refSearchHeader.offsetHeight
          - refSearchTab.offsetHeight
          - 24
      })
    })
  },
  methods: {
    async computMax(store, target, condition, algorithm) {
      while (target.length > 0)
        target.pop()
      const array = await $MyLibDbc[store].getAll()
      array.sort((a, b) => algorithm(a, b, condition))

      if (array.length > 6)
        for (let i = 0; i < 6; i++)
          target.push(new Link(array[i].id, array[i].title, styleCompute(i)))
      else
        for (let i = 0; i < array.length; i++)
          target.push(new Link(array[i].id, array[i].title, styleCompute(i)))
    },
    async load() {
      this.indexTotalCount = await $MyLibDbc.index.count()
      this.tagTotalCount = await $MyLibDbc.tag.count()
      this.fileTotalCount = await $MyLibDbc.file.count()
      this.computMax('index', this.alwaysVisits, 'click', max)
      this.computMax('index', this.hardlyVisits, 'click', min)
      this.computMax('index', this.latestRecords, 'createDate', max)
      this.computMax('index', this.earliestRecords, 'createDate', min)
    },
    handleRefresh() {
      this.load()
    }
  },
  data() {
    return {
      mainHeight: 0,
      alwaysVisits: new Array(),
      hardlyVisits: new Array(),
      latestRecords: new Array(),
      earliestRecords: new Array(),
      indexTotalCount: 0,
      tagTotalCount: 0,
      fileTotalCount: 0
    }
  }
}
</script>

<style>
#lib-welcome {
  width: 100%;
  overflow-y: auto;
}

.statistic-box {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.statistic-record-box {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
}

.statistic-link-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.statistic-link {
  margin-left: 12px;
}

.statistic-link-title {
  color: #CFD3DC;
  margin: 0px;
}

.statistic-link-1st {
  color: #F73030;
}

.statistic-link-2nd {
  color: #FE2C45;
}

.statistic-link-3rd {
  color: #FF6600;
}

.statistic-link-4th {
  color: #FAA90B;
}

.statistic-link-5th {
  color: #9195A3;
}

.statistic-link-empty {
  color: #9EA4AA;
  font-size: 12px;
}
</style>